<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input  class="filter-item" placeholder="请输入商户简称" v-model="params.merchantShortName" style="width: 180px;" clearable></el-input>
      <el-input v-if="companyType!='hulu'" class="filter-item" placeholder="请输入商户编号" v-model="params.merchantNo" style="width: 150px;" clearable></el-input>
      <el-input v-if="companyType=='hulu'" class="filter-item" placeholder="请输入商户编号" v-model="params.merchantCatagory" style="width: 150px;" clearable></el-input>
      <el-select class="filter-item" v-model="params.openStatus" filterable placeholder="商户状态" style="width: 120px;" clearable>
        <el-option value=1 label="正常"></el-option>
        <el-option value=0 label="关闭"></el-option>
      </el-select>
      <el-input v-if="companyType!='hulu'" class="filter-item" placeholder="请输入营业执照名称" v-model="params.licenseName" style="width: 180px;" clearable></el-input>
      <el-button class="filter-item" type="primary" icon="el-icon-edit-outline" @click="getPosmerchantList(1)">搜索</el-button>
      <el-button v-if="btnPower.StoreListAdd" class="filter-item" type="primary" icon="el-icon-edit-outline" @click="getButton()">添加</el-button>
    </div>
    <el-table
      :data="posmerchantList"
      v-loading="posmerchantListLoading"
      element-loading-text="请稍后"
      border
      fit
      highlight-current-row>
      <el-table-column
        type="index"
        label="序号"
        width="50"
        align="center">
      </el-table-column>
      <el-table-column
        prop="merchantNo"
        label="商户编号"
        width="100"
        v-if="companyType!='hulu'"
        align="center">
      </el-table-column>
      <el-table-column
        prop="merchantCatagory"
        label="商户编号"
        width="100"
        v-if="companyType=='hulu'"
        align="center">
      </el-table-column>
      <el-table-column
        prop="licenseName"
        label="营业执照名称"
        v-if="companyType!='hulu'"
        align="center">
      </el-table-column>
      <el-table-column
        prop="merchantShortName"
        label="商户简称"
        align="center">
      </el-table-column>
      <el-table-column
        prop="merchantName"
        label="线下门店名称"
        v-if="companyType!='hulu'"
        align="center">
      </el-table-column>
      <el-table-column
        prop="openStatus"
        label="商户状态"
        :formatter="agentinfoType"
        v-if="companyType!='hulu'"
        width="80"
        align="center">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="提件时间"
        :formatter="timeFormat"
        align="center">
      </el-table-column>
      <el-table-column
        prop="modifyTime"
        label="更新时间"
        :formatter="timeFormat"
        align="center">
      </el-table-column>
      <el-table-column
        label="操作"
        width="230"
        align="center">
        <template slot-scope="scope">
          <el-button v-if="btnPower.ShopCheck" type="text" size="small" icon="el-icon-s-order" class="el-link" @click="getUrl(scope.row)" >查看</el-button>
          <el-button v-if="btnPower.StoreListRev" type="text" size="small" icon="el-icon-edit" class="el-link el-link--warning" @click="getButton(scope.row)" >编辑</el-button>
          <el-button v-if="btnPower.MerchantShopList" type="text" size="small" icon="el-icon-s-shop" class="el-link el-link--success" @click="getQueryShopList(scope.row)" >店铺</el-button>
          <el-button v-if="btnPower.StoreSet" type="text" size="small" icon="el-icon-share" class="el-link el-link--danger" @click="getSet(scope.row)">通道</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="params.current" :limit.sync="params.size" @pagination="getPosmerchantList" />
    <el-dialog
      :title="popupType==1?'添加商户':'编辑商户'"
      :visible.sync="popup"
      :close-on-click-modal=false
      :destroy-on-close=true
      width="500px"
      center>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
        <el-form-item v-if="companyType=='hulu'" label="商户编号" prop="merchantCatagory" ref="merchantCatagory">
            <el-input v-model="ruleForm.merchantCatagory"></el-input>
        </el-form-item>
        <el-form-item label="商户简称" prop="merchantShortName" ref="merchantShortName">
            <el-input v-model="ruleForm.merchantShortName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="popup = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { rawCitiesData } from "@/utils/city-data.js"
import commin from "@/utils/commin.js"
import { posmerchantList, agentBaseAll, salesAll, addRevPosmerchant } from '@/api/api.verify.js'

export default {
  components:{Pagination},
  name: 'StoreList',
  data() {
    return {
      btnPower:JSON.parse(localStorage.getItem('btnList')),//按钮权限
      companyType:commin.getDomain(),//判断域名
      posmerchantListLoading:true,
      posmerchantList: [],//门店列表
      total:0,//总条数
      params:{
          current: 1,
          size: 10,
          merchantShortName:null,//商户简称
          merchantNo:null,//商户编号
          merchantCatagory:null,//葫芦商户编号
          openStatus:null,//商户状态  0关闭   1开启
          licenseName:null,//营业执照名称
      },//条件查询
      popupType:1,//1 添加  2 编辑
      popup:false,//商户弹窗状态
      ruleForm:{
        id:null,
        merchantCatagory:null,//葫芦商户编号
        merchantShortName:null,
      },
      rules:{
        merchantCatagory:[
            {required: true, message: '请输入商户编号', trigger: 'blur'},
        ],
        merchantShortName:[
            {required: true, message: '请输入商户简称', trigger: 'blur'},
        ],
      }
    }
  },
  created() {
    this.getStart();
  },
  methods: {
    getStart(){//初始化
      this.getPosmerchantList(1)
    },
    getPosmerchantList(e){//获取支付平台商户列表
      let _this = this;
      if(e==1){this.params.current=1}
      let data=this.params;
      this.posmerchantListLoading=true
      posmerchantList(data).then(d=>{
        _this.posmerchantList = d.data.records;
        _this.total = Number(d.data.total);
      }).finally(d=>{
        _this.posmerchantListLoading=false
      })
    },

    timeFormat(row, column, cellValue, index) {
      if(cellValue){
        return this.common.getLocalTime(parseInt(cellValue));
      }else{
        return '无'
      }
    },
    agentinfoType(row, column, cellValue){//商户状态
      switch(Number(cellValue)){
        case 0:
          return '关闭';
        case 1:
          return '正常';
        default:
          return cellValue;
      };
    },
    getUrl(e){//查询商户信息
      let query={shopName:e.merchantShortName,shopNo:e.merchantNo}
      let route=this.$router.resolve({path:"/shopCheck", query:query  })
      window.open(route.href, '_blank')
    },
    getQueryShopList(e){//点击查询店铺
      let data={}
      if(e.merchantNo){
        data.merchantNo=e.merchantNo
      }
      if(e.merchantCatagory){
        data.merchantCatagory=e.merchantCatagory
      }
      let route=this.$router.resolve({path:'/merchantShopList', query:data  })
      window.open(route.href, '_blank')
    },
    getSet(e){//跳转通道页面
      let data={}
      data.id=e.id
      data.name=e.merchantShortName
      // if(e.merchantCatagory){
      //   data.merchantCatagory=e.merchantCatagory
      // }
      this.$router.push({name:'StoreSet', query: data })
    },
    getButton(e){//点击添加编辑商超
      if (e) {//修改
        this.popupType=2
        this.ruleForm.id=e.id
        if(e.merchantCatagory){
          this.ruleForm.merchantCatagory=e.merchantCatagory
        }
        this.ruleForm.merchantShortName=e.merchantShortName
      }else{//添加
        this.popupType=1
        this.ruleForm.id=null
        this.ruleForm.merchantShortName=null
        this.ruleForm.merchantCatagory=null
      }
      this.popup=true
    },
    submitForm(formName) {//表单验证
      let _this = this;
      this.$refs[formName].validate((valid,object) => {
        if(valid) {
          _this.getForm()
        }else{
          for (const i in object) {
            let dom = this.$refs[i]
            // 这里是针对遍历的情况（多个输入框），取值为数组
            if (Object.prototype.toString.call(dom) !== '[object Object]') { 
              dom = dom[0]
            }
              // 第一种方法（包含动画效果）
              dom.$el.scrollIntoView({ // 滚动到指定节点
              // 值有start,center,end，nearest，当前显示在视图区域中间
              block: 'center', 
              // 值有auto、instant,smooth，缓动动画（当前是慢速的）
              behavior: 'smooth' 
            });
            break // 跳出循环了
          }
        }
      });
    },
    getForm() {//提交表单
      let _this=this;
      let data=this.ruleForm;
      let method="POST";
      let alerts="添加";
      if(this.ruleForm.id){
          method="PUT";
          alerts="修改";
      };
      addRevPosmerchant(data,method).then(d=>{
        _this.$message({
            message: alerts+'成功',
            type: 'success'
        })
        _this.popup=false
        _this.getPosmerchantList()
      })
    },
  },
  watch: {
    "params.merchantShortName":function(){
      if (this.params.merchantShortName == "") {
        this.params.merchantShortName = null;
      }
    },
    "params.merchantNo":function(){
      if (this.params.merchantNo == "") {
        this.params.merchantNo = null;
      }
    },
    "params.salesId":function(){
      if (this.params.salesId == "") {
        this.params.salesId = null;
      }
    },
    "params.openStatus":function(){
      if (this.params.openStatus == "") {
        this.params.openStatus = null;
      }
    },
    "params.licenseName": function () {
      if (this.params.licenseName == "") {
        this.params.licenseName = null;
      }
    }
  }
}
</script>

